<template>
    <div>
        <div class="page-title-section" style="background-image:url(images/parallax-5.jpg)">
            <div class="container">
                <div class="center-holder page-title">
                    <h1>我们的服务</h1>
                    <p style="color: white;">
                        依托一站式后台管理系，提供优质的全流程服务，打造开放共赢的系统管理平台。
                    </p>
                </div>
            </div>
        </div>
        <div class="section-block-grey">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-4" v-for="(item,index) in dataSource" :key="index" >
                        <div class="service-grid">
                            <img alt=service-image :src="item.img"/>
                            <div class="inner-padd">
                                <h4>{{item.title}}</h4>
                                <p>{{item.content}}</p>
                                <a @click="toServiceDetails(item)">阅读更多</a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {editService, getServicesList} from "../../api/base";

    export default {
        name: "Services",
        data() {
            return {
                dataSource: []
            }
        },
        mounted() {
            this.getDataSource();
        },
        methods: {
            getDataSource: async function () {
                this.dataSource = await getServicesList();
            },
            toServiceDetails: async function (item) {
                let id = item['_id'];
                if (id) {
                    // 增加阅读量
                    await editService({id});
                }
                this.$router.push({
                    path: '/services_details',
                    query: {
                        item: encodeURIComponent(JSON.stringify(item))
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>